// ============================================================================
// 卡片组件
// ============================================================================

import React, { forwardRef } from 'react'

export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: 'default' | 'hover' | 'interactive'
  padding?: 'none' | 'sm' | 'md' | 'lg'
}

/**
 * 卡片组件
 */
export const Card = forwardRef<HTMLDivElement, CardProps>(({
  variant = 'default',
  padding = 'md',
  className = '',
  children,
  ...props
}, ref) => {
  const baseClasses = 'card'
  const variantClasses = {
    default: '',
    hover: 'card-hover',
    interactive: 'card-interactive'
  }
  const paddingClasses = {
    none: 'p-0',
    sm: 'p-4',
    md: 'p-6',
    lg: 'p-8'
  }

  const classes = [
    baseClasses,
    variantClasses[variant],
    paddingClasses[padding],
    className
  ].filter(Boolean).join(' ')

  return (
    <div ref={ref} className={classes} {...props}>
      {children}
    </div>
  )
})

Card.displayName = 'Card'

/**
 * 卡片头部组件
 */
export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
  title?: string
  subtitle?: string
  action?: React.ReactNode
}

export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(({
  title,
  subtitle,
  action,
  className = '',
  children,
  ...props
}, ref) => {
  return (
    <div 
      ref={ref} 
      className={`flex items-start justify-between pb-4 border-b border-gray-200 dark:border-gray-700 ${className}`}
      {...props}
    >
      <div className="flex-1 min-w-0">
        {title && (
          <h3 className="text-lg font-medium text-gray-900 dark:text-white">
            {title}
          </h3>
        )}
        {subtitle && (
          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
            {subtitle}
          </p>
        )}
        {children}
      </div>
      {action && (
        <div className="flex-shrink-0 ml-4">
          {action}
        </div>
      )}
    </div>
  )
})

CardHeader.displayName = 'CardHeader'

/**
 * 卡片内容组件
 */
export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
  padding?: 'none' | 'sm' | 'md' | 'lg'
}

export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(({
  padding = 'md',
  className = '',
  children,
  ...props
}, ref) => {
  const paddingClasses = {
    none: '',
    sm: 'py-2',
    md: 'py-4',
    lg: 'py-6'
  }

  return (
    <div 
      ref={ref} 
      className={`${paddingClasses[padding]} ${className}`}
      {...props}
    >
      {children}
    </div>
  )
})

CardContent.displayName = 'CardContent'

/**
 * 卡片底部组件
 */
export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
  justify?: 'start' | 'center' | 'end' | 'between'
}

export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(({
  justify = 'end',
  className = '',
  children,
  ...props
}, ref) => {
  const justifyClasses = {
    start: 'justify-start',
    center: 'justify-center',
    end: 'justify-end',
    between: 'justify-between'
  }

  return (
    <div 
      ref={ref} 
      className={`flex items-center pt-4 border-t border-gray-200 dark:border-gray-700 ${justifyClasses[justify]} ${className}`}
      {...props}
    >
      {children}
    </div>
  )
})

CardFooter.displayName = 'CardFooter'

/**
 * 统计卡片组件
 */
export interface StatsCardProps {
  title: string
  value: string | number
  change?: {
    value: string | number
    type: 'increase' | 'decrease' | 'neutral'
  }
  icon?: React.ReactNode
  className?: string
}

export function StatsCard({ 
  title, 
  value, 
  change, 
  icon, 
  className = '' 
}: StatsCardProps) {
  const changeColors = {
    increase: 'text-green-600 dark:text-green-400',
    decrease: 'text-red-600 dark:text-red-400',
    neutral: 'text-gray-600 dark:text-gray-400'
  }

  return (
    <Card className={className}>
      <div className="flex items-center justify-between">
        <div className="flex-1">
          <p className="text-sm font-medium text-gray-600 dark:text-gray-400">
            {title}
          </p>
          <p className="text-2xl font-bold text-gray-900 dark:text-white mt-1">
            {value}
          </p>
          {change && (
            <p className={`text-sm mt-1 ${changeColors[change.type]}`}>
              {change.type === 'increase' && '+'}
              {change.value}
            </p>
          )}
        </div>
        {icon && (
          <div className="flex-shrink-0 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
            {icon}
          </div>
        )}
      </div>
    </Card>
  )
}
